<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>video</title>

    <!--封装好的视频布局样式-->
    <link rel="stylesheet" type="text/css" href="css/jsmodern.min.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!--mp4视频插件-->
    <script type="text/javascript" src="js/jsmodern.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>

    <style>
        #video {
            width: 970px;
            height: 520px;
            margin: 0 auto;
            position: relative;
        }

        #video video {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .VideoBtn {
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            width: 70px;
            height: 70px;
            margin-left: -35px;
            margin-top: -35px;
            cursor: pointer;
            z-index: 10;
        }
    </style>

    <!--视频插件调用方法-->
    <script>
        $(function () {
            //视频
            jsModern.video("#video");
            //播放视频
            $(".VideoBtn").click(function () {
                var video = document.getElementById("videoShow");
                video.play();
                $('.VideoBtn').hide();
            })
            //监听视频的播放状态
            var video = document.getElementById("videoShow");
            video.oncanplay = function () {
                $(".VideoBtn").show();
                //$("#video").attr("poster","");
            }
            //视频播放事件
            video.onplay = function () {
                $("#videoShow").attr("poster", "");
                $(".VideoBtn").hide();
            };
            video.onplaying = function () {
                $(".VideoBtn").hide();
            };

            //视频暂停事件
            video.onpause = function () {
                $(".VideoBtn").show();
            };
            //点击视频周围暂停播放图片出现
            video.onclick = function () {
                if (video.paused) {
                    $(".VideoBtn").hide();
                    video.play();
                } else {
                    $(".VideoBtn").show();
                    video.pause();
                }
            };
        })
    </script>
</head>

<body>

<div id="video">
    <div id="abc">
        <video v-bind:src="pathUrl" id="videoShow"></video>
        <span class="VideoBtn"><img src="img/bo1.png"></span>
    </div>
</div>

<script type="text/javascript">
    var id = window.location.href.split("=")[1]; //截取字符串
    var cwname;
    var storage = window.localStorage;
    var token = storage.getItem("token");
    var refreshToken = storage.getItem("refreshToken");
    new Vue({
        el: "#abc",
        data() {
            return {
                pathUrl: ""
            };
        },
        mounted() {
            let data = {
                "cwid": id
            }
            axios.post(
                "/findCoursewareByCwid", data, {
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                    },
                }).then(res => {
                if (res.data.code == 200) {
                    console.log(res.data.data);
                    cwname = res.data.data.cwname;
                    this.pathUrl = "http://117.51.156.132/file/" + cwname + ".mp4"
                }
            })
        }
    })
</script>

</body>

</html>